import React, { useState, useEffect } from "react";
// ui
import { Row, Col, Spin} from 'antd';
// components
import Map from "./pages/charts/Map";
import ChartModule01 from "./pages/charts/ChartModule01";
import ChartModule02 from "./pages/charts/ChartModule02";
import ChartModule03 from "./pages/charts/ChartModule03";
import ChartModule04 from "./pages/charts/ChartModule04";
import ChartModule05 from "./pages/charts/ChartModule05";
import ChartModule06 from "./pages/charts/ChartModule06";
import Other from "./pages/Other";
// server
import { getAreaData } from "./server/api/area";
// util
import { areaName } from "./utils/area";

const App: React.FC<any> = () => {
  const [areaData, setAreaData] = useState() as any;
  const [loading,ssetLoading]=useState(false);

  // getListRequest  
  const getAreaDataRequest = async () => {
    let res:any = await getAreaData();   
    
    if (res.data.success===true&&res.data.data.code===10000) {
      let areaTree = res.data.data.data.areaTree;
      let china = areaTree.filter((item: any) => item.name === "中国")[0];
      china.children.forEach((item: any) => {
        item.name = areaName[item.name];
        item.value = item.total.confirm - item.total.dead - item.total.heal;
      });
      setAreaData(china);
      ssetLoading(true);
    }
  }

  useEffect(() => {
    getAreaDataRequest();
  }, []);

  return (
    <div className="main">       
      <div className="title">
        <div>中国疫情地图</div>
        <div className="other"><Other /></div>        
      </div>
      <Row>      
        <Col md={5} sm={24} xs={24} style={{height:"calc(100vh - 80px)",overflow:"hidden"}}>
          <div className="chartItem">
            <div className="tit">今日康复患者省排行</div>
            <div className="chart"><ChartModule01 areaData={areaData} /></div>
            <div className="boxfoot"></div>
          </div>
          <div className="chartItem">
            <div className="tit">模块2</div>
            <div className="chart"><ChartModule02 areaData={areaData} /></div>
            <div className="boxfoot"></div>
          </div>
          <div className="chartItem">
            <div className="tit">模块3</div>
            <div className="chart"><ChartModule03 areaData={areaData} /></div>
            <div className="boxfoot"></div>
          </div>
        </Col>
        <Col md={14} sm={24} xs={24}>
          <div className="title01">
            <div className="item">
              {areaData && areaData.total
                ? <span className="num">{areaData.total.confirm - areaData.total.dead - areaData.total.heal}</span>
                : <span className="num">xx</span>
              }
              {areaData && areaData.today && areaData.today.storeConfirm
                ? <span className="other">较昨日+{areaData.today.storeConfirm}</span>
                : <span className="other">待公布</span>
              }
              <span className="txt">现有确诊数</span>
            </div>
            <div className="item">
              {areaData && areaData.total
                ? <span className="num">{areaData.total.confirm}</span>
                : <span className="num">xx</span>
              }
              {areaData && areaData.today && areaData.today.confirm
                ? <span className="other">较昨日+{areaData.today.confirm}</span>
                : <span className="other">待公布</span>
              }
              <span className="txt">累积确诊数</span>
            </div>
            <div className="item">
              {areaData && areaData.total
                ? <span className="num">{areaData.total.heal}</span>
                : <span className="num">xx</span>
              }
              {areaData && areaData.today && areaData.today.heal
                ? <span className="other">较昨日+{areaData.today.heal}</span>
                : <span className="other">待公布</span>
              }
              <span className="txt">累积康复数</span>
            </div>
            <div className="item">
              {!areaData
                ? <span className="num">xx</span>
                : <span className="num">{(areaData as any).total.dead}</span>
              }
              {areaData && areaData.today && areaData.today.dead
                ? <span className="other">较昨日+{areaData.today.dead}</span>
                : <span className="other">待公布</span>
              }
              <span className="txt">累积死亡数</span>
            </div>
          </div>
          <div className="map"><Map areaData={areaData}></Map></div>
        </Col>
        <Col md={5} sm={24} xs={24} style={{height:"calc(100vh - 80px)",overflow:"hidden"}}>
          <div className="chartItem">
            <div className="tit">模块4</div>
            <div className="chart"><ChartModule04 areaData={areaData} /></div>
            <div className="boxfoot"></div>
          </div>
          <div className="chartItem">
            <div className="tit">模块5</div>
            <div className="chart"><ChartModule05 areaData={areaData} /></div>
            <div className="boxfoot"></div>
          </div>
          <div className="chartItem">
            <div className="tit">模块6</div>
            <div className="chart"><ChartModule06 areaData={areaData} /></div>
            <div className="boxfoot"></div>
          </div>
        </Col>
      </Row>
      {loading||
      <div className="spin">
         <Spin spinning={true} tip="地图数据加载中" size="large" delay={500}/>            
       </div>
      }
     
      {/* setyle*/}
      <style jsx>{`
          .main{
            min-height:100vh;
            background:#020933;                          
            .title{
              position:relative;  
              height:80px;
              line-height:80px;
              text-align:center;
              font-weight:bold;
              font-size:30px;
              color:white;                                     
              .other{
                position:absolute;
                top:0;
                right:20px;
              }     
            }   
            .title01{
              height:130px;                                         
              overflow:hidden;
              display:flex;
              justify-content:space-between;
              align-items:center;   
              background:rgba(101,132,226,.1) url(${require("./assets/img/line.png")}) center;                     
              margin:0 10px;   
              .item{
                width:50%;
                .num{
                  text-align:center;
                  display:block;
                  color: #ffeb7b;
                  font-family:"electronicFont";
                  font-size:46px;
                  margin:auto;
                  height:50px;
                  line-height:40px;
                  overflow:hidden;
                }
                .other{
                  display:block;
                  text-align:center;
                  color:white;
                  font-size:15px;
                }
                .txt{
                  display:block;
                  text-align:center;
                  color:white;
                  font-size:18px;
                }
              }
            }      
            .map{
              height:calc( 100% - 200px);  
              width:100%;            
            }               
            .chartItem{
              height:32.5%;             
              box-sizing: border-box;             
              margin-bottom:10px;
              color:white;
              position: relative;  
              padding:20px;       
              background:url(${require("./assets/img/line.png")}) center;
              border: 1px solid rgba(25,186,139,.17);
              .tit{
                height:20px;
                line-height:20px;
                text-align:center;
                font-size:14px;
              }    
              .chart{
                height:95%;
              } 
            }
            .chartItem:before,.chartItem:after,.boxfoot:before,.boxfoot:after{
              position: absolute;
              width: 10px;
              height: 10px;
              content: "";
            }
            .chartItem:before {
              border-left: 2px solid #02a6b5;
              left: 0;
              top:0;
              border-top: 2px solid #02a6b5;              
            }            
            .chartItem:after{
              border-right: 2px solid #02a6b5;
              right: 0;
              top:0;
              border-top: 2px solid #02a6b5;              
            }
            .boxfoot:before{
              border-left: 2px solid #02a6b5;
              bottom: 0;
              left:0;
              border-bottom: 2px solid #02a6b5;              
            }            
            .boxfoot:after{
              border-right: 2px solid #02a6b5;
              bottom: 0;
              right:0;
              border-bottom: 2px solid #02a6b5;              
            }
            .spin{
              position:fixed;
              width:100%;
              height:100%;
              top:0;
              left:0;
              background:#020933;     
              display:flex;
              justify-content:center;
              align-items:center;
              opacity:0.9; 
              color:#1890ff;              
            }                  
          }
                
          @media (max-width: 800px) {
            .main{   
              .title{
                font-size:16px!important;
              }
              .title01{
                .num{
                  font-size:24px!important;
                }   
                .other,.txt{
                  font-size:10px!important;
                }
              }              
              .map{
                height: 555px;
               
              }
              .tit{
                font-size:16px!important;
              }
            }
          }
      `}</style>
    </div>
  );
};

export default App;